<template>
    <div class="component">
        <div class="jyTj" style="padding-bottom: 10px solid #ccc">
            <div class="topTit">
                <div class="topLeft">
                    <img src="@/assets/shareData/titleSwitch.png" />
                    唤醒量统计
                </div>
            </div>
            <div class="dataPicker" @click="showDataPicker">
                <div class="choseDate">
                    <img class="selectImg" src="@/assets/shareData/caleaderIcon.png" />
                    <span>{{ date }}</span>
                    <img class="selectImg" src="@/assets/shareData/selectICon.png" />
                </div>
            </div>
            <div class="activityTj" id="activityTj"></div>
            <div class="detailInfo">
                <div style="jyNum">
                    当前时间内唤醒数:
                    <span style="color: #000">{{ jylAllinfo.allActPos }}</span>
                </div>
                <div  class="jybs" >
                    终端总数:
                    <span style="color: #000">{{ jylAllinfo.allPos }}</span>
                </div>
                <div class="jybs" v-if="jylAllinfo.allPos">
                    总唤醒率:
                    <span style="color: #000">{{ (jylAllinfo.actPos / jylAllinfo.allPos * 100 ).toFixed(2) }}%</span>
                </div>
            </div>
        </div>
        <div class="jyTj" style="margin-top: 30px">
            <div class="topTit">
                <div class="topLeft">
                    <img src="@/assets/shareData/titleSwitch.png" />
                    唤醒趋势(台)
                </div>
                <div class="topRight"></div>
            </div>
            <div class="dateBtn">
                <div class="btnItem" @click="selMon(1)" :class="activityBtn == 1 ? 'onActivity' : ''">近3个月</div>
                <div class="btnItem" @click="selMon(2)" :class="activityBtn == 2 ? 'onActivity' : ''">近6个月</div>
                <!-- <div class="btnItem" @click="selMon(3)" :class="activityBtn == 3 ? 'onActivity' : ''">近1年</div> -->
            </div>
            <div class="activityTrend" id="activityTrend"></div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { agentPosActive, agentTransTrend, agentPosActiveTrend } from '@/api/shareData.ts'
let props = defineProps({
    date: {
        type: String,
        default: `${new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()}至${
            new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
        }`
    },
    active: {
        type: String,
        default: 0
    }
})
const jylData = ref([])
const jylAllinfo = ref([])
const activityBtn = ref(1)
// 时间戳格式化
const formatTime = time => {
    let date = new Date(time)

    let year = date.getFullYear()

    let month = date.getMonth() + 1

    let day = date.getDate()

    return year + '-' + month.toString().padStart(2, '0') + '-' + day.toString().padStart(2, '0')
}
// 交易量统计图表
const createDealTb = () => {
    var chartDom = document.getElementById('activityTj')
    var myChart = echarts.init(chartDom)
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
            position: ['0%', '-7%']
        },
        title: {
            text: '全部',
            left: 'center',
            top: '45%',
            textStyle: {
                color: '#000',
                fontSize: 12,
                align: 'center'
            }
        },
        series: [
            {
                name: '全部',
                type: 'pie',
                radius: ['40%', '60%'],
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                data: jylData.value,
                // width: 325,
                label: {
                    position: 'outside',
                    show: true,
                    formatter(params) {
                        if (params.name !== '') {
                            return `${params.name}` + `\n${params.percent === undefined ? 0 : params.percent}%`
                        }
                        return ''
                        // correct the percentage
                        // return param.name + ' \n(' + param.percent + '%)'
                    }
                },
                labelLine: {
                    normal: {
                        smooth: 0.2,
                        length: 150 / 20,
                        length2: 150 / 20
                    }
                }
            }
        ]
    }
    option && myChart.setOption(option)
}
// 交易趋势图表
const createJyqs = (data1, data2) => {
    var chartDom = document.getElementById('activityTrend')
    var myChart = echarts.init(chartDom)
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: data1,
            axisLabel: {
                interval: 0, //   坐标轴刻度标签的显示间隔(在类目轴中有效哦)，默认会采用标签不重叠的方式显示标签（也就是默认会将部分文字显示不全）可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推
                rotate: 40 // 标签倾斜的角度，在类目轴的类目标签显示不全时可以通过旋转防止标签重叠（官方这样说的）旋转的角度是-90到90度
            }
        },
        yAxis: {
            type: 'value'
        },
        grid: {
            left: '4%',
            right: '1%',
            bottom: '1%',
            containLabel: true
        },
        series: [
            {
                itemStyle: {
                    // 设置线条上点的颜色（和图例的颜色）
                    normal: {
                        color: '#de4133'
                    }
                },
                data: data2,
                type: 'line',
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            // 渐变颜色
                            {
                                offset: 0,
                                color: '#fee2df'
                            },
                            {
                                offset: 1,
                                color: '#fff'
                            }
                        ],
                        global: false
                    }
                }
            }
        ]
    }
    option && myChart.setOption(option)
}
// 获取交易量数据
const getJyl = val => {
    agentPosActive({
        transTimeStart: props.date.split('至')[0],
        transTimeEnd: props.date.split('至')[1],
        tag: val
    }).then(res => {
        jylAllinfo.value = res.object
        const dataArr = []
        for (let key in res.object) {
            if (key == 'actPos') {
                dataArr.push({ value: res.object[key], name: '总唤醒' })
            }else if (key == 'unActPos') {
                dataArr.push({ value: res.object[key], name: '总未唤醒' })
            }
        }
        // dataArr.push({ value: res.object.allPos - res.object.allActPos, name: '未唤醒' })
        jylData.value = dataArr
        console.log(jylData.value, 'jylData.value')
        createDealTb()
    })
}
// 获取交易趋势数据
const getJyqs = val => {
    const endTime = formatTime(+new Date())
    let startTime = formatTime(+new Date())
    let endMonth = new Date().getMonth() + 1
    let endYear = new Date().getFullYear()
    console.log(endMonth, 'endMonth1111')
    console.log(activityBtn.value == 1, 'activityBtn.value')
    if (activityBtn.value == 1) {
        if (endMonth - 2 <= 0) {
            endMonth = 12 + (endMonth - 2)
            endYear -= 1
        } else if (0 < endMonth - 2 < 10) {
            endMonth = '0' + (endMonth - 2)
        } else {
            endMonth = endMonth - 2
        }
        startTime = endYear + '-' + endMonth + '-' + '01'
    } else if (activityBtn.value == 2) {
        if (endMonth - 5 <= 0) {
            endMonth = 12 + (endMonth - 5)
            endYear -= 1
        } else if (0 < endMonth - 5 < 10) {
            endMonth = '0' + (endMonth - 5)
        } else {
            endMonth = endMonth - 5
        }
        startTime = endYear + '-' + endMonth + '-' + '01'
    } else if (activityBtn.value == 3) {
        if (endMonth - 11 <= 0) {
            endMonth = 12 + (endMonth - 11)
            endYear -= 1
        } else if (0 < endMonth - 11 < 10) {
            endMonth = '0' + (endMonth - 11)
        } else {
            endMonth = endMonth - 11
        }
        startTime = endYear + '-' + endMonth + '-' + '01'
    }
    agentPosActiveTrend({
        transTimeStart: startTime,
        transTimeEnd: endTime,
        tag: val
    }).then(res => {
        const mondata = []
        const valuedata = []
        res.object.TrendList.forEach(item => {
            mondata.push(item.MON)
            valuedata.push(item.actNum)
        })
        console.log(mondata, valuedata, 'mondata,valuedata')
        createJyqs(mondata, valuedata)
    })
    // agentTransTrend({
    //     transTimeStart: startTime,
    //     transTimeEnd: endTime,
    //     tag: val
    // }).then(res => {
    //     const mondata = []
    //     const valuedata = []
    //     res.object.TrendList.forEach(item => {
    //         mondata.push(item.MON)
    //         valuedata.push(item.AMOUNT)
    //     })
    //     console.log(mondata, valuedata, 'mondata,valuedata')
    //     createJyqs(mondata, valuedata)
    // })
}
// 监听传入时间变化
watch(
    () => props.date,
    (newValue, oldValue) => {
        getJyl(props.active)
    }
)
watch(
    () => props.active,
    (newValue, oldValue) => {
        getJyl(newValue)
        getJyqs(newValue)
    },
    {
        immediate: true,
        deep: true
    }
)
const emit = defineEmits(['showPicker'])
const showDataPicker = () => {
    emit('showPicker')
}

const selMon = val => {
    activityBtn.value = val
    getJyqs(props.active)
}
onMounted(() => {})
</script>
<style scoped lang="scss">
.jyTj {
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 30px;
}
.topTit {
    display: flex;
    align-items: center;
    .topLeft {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-family: SimHei;
        font-weight: 400;
        color: #4d4d4d;
        img {
            width: 22px;
            height: 15px;
            margin-right: 5px;
        }
    }
}
.dateBtn {
    display: flex;
    margin-top: 20px;
    .btnItem {
        text-align: center;
        line-height: 29px;
        width: 74px;
        height: 29px;
        border: 1px solid #cbcbcb;
        opacity: 1;
        border-radius: 4px;
        margin-right: 8px;
        font-size: 14px;
        font-family: SimHei;
        font-weight: 400;
        color: #b1b1b1;
    }
    .onActivity {
        border: 1px solid #66d6ff;
        opacity: 1;
        border-radius: 4px;
        color: #66d6ff;
        background: #fff;
    }
}
.dataPicker {
    .choseDate {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 29px;
        border: 1px solid #cbcbcb;
        opacity: 1;
        border-radius: 4px;
        margin-top: 20px;
    }
    .selectImg {
        width: 16px;
        height: 16px;
    }
}
#activityTj {
    width: 100%;
    height: 251px;
    margin-top: 30px;
}
#activityTrend {
    width: 100%;
    height: 400px;
    margin-top: 30px;
}
.detailInfo {
    font-size: 14px;
    color: #a7a7a7;
    // margin-top: 20px;
    .jybs {
        margin-top: 8px;
    }
}
</style>
